import React, { useEffect, useRef, useState } from 'react'
import { Button, SearchBar, Space, Toast } from 'antd-mobile'
import { Map, Marker, NavigationControl, InfoWindow } from 'react-bmapgl';
import style from './style.module.css'
import Navbar from '../../components/Navbar/Index'
import { useNavigate } from 'react-router-dom'
import { LeftOutline } from 'antd-mobile-icons'
function Index() {
    const [startVal, setStartVal] = useState('')
    const [endValue, setEndValue] = useState('')
    const mapRef = useRef()
    const MyBMapGl = window.BMapGL
    const navigate = useNavigate()



    const handleOk = () => {
        if (mapRef.current) {
            console.log(mapRef);
            const myMap = mapRef.current.map
            var driving = new MyBMapGl.DrivingRoute(myMap, { renderOptions: { map: myMap, autoViewport: true } });
            var myGeo = new MyBMapGl.Geocoder();
            myGeo.getPoint(startVal, function (point) {
                if (point) {
                    console.log(point, 'point');
                    let p1 = new MyBMapGl.Point(point.lng, point.lat);
                    myGeo.getPoint(endValue, function (point2) {
                        if (point2) {
                            console.log(point2, 'point2');
                            let p2 = new MyBMapGl.Point(point2.lng, point2.lat);
                            driving.search(p1, p2);
                            var transit = new MyBMapGl.TransitRoute(myMap, {
                                renderOptions: { map: myMap, panel: 'result' },
                                policy: 0,
                            });
                            transit.search(p1, p2);

                        } else {
                            alert('您选择的地址没有解析到结果！');
                        }
                    }, '北京市')
                } else {
                    alert('您选择的地址没有解析到结果！');
                }
            }, '北京市')


        }
    }
    return (
        <div>
            <Navbar title={'路线规划'}
                nav_footer={
                    <div style={{ height: "30px" }}></div>
                }
            ></Navbar>
            <div className={style['go_back']} onClick={() => { navigate(-1) }}><LeftOutline style={{ color: '#fff', fontSize: '20px' }} /></div>

            <div style={{
                padding: "20px"
            }}>
                <SearchBar placeholder='请输入起点' value={startVal} onChange={(value) => {
                    setStartVal(value)
                }} />
                <SearchBar placeholder='请输入终点' value={endValue} onChange={(value) => {
                    setEndValue(value)
                }} />
                <Button onClick={handleOk} style={{
                    fontSize: '12px',
                    width: '120px',
                    height: '30px',
                    marginLeft: '30px',
                    background: '#1081F5',
                    color: '#fff'
                }}>开始规划路线</Button>
            </div>

            <Map center={{ lng: 116.402544, lat: 39.928216 }} zoom="11" ref={mapRef} style={{ height: '200px' }}>
                <Marker position={{ lng: 116.402544, lat: 39.928216 }} />
                <NavigationControl />
            </Map>
            <div id='result'>

            </div>
        </div>
    )
}

export default Index